<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>

<body>
  <script src="./src/vue.js"></script>
  <!--插值-->
  <!--文本-->
  <!-- <div id="app">
    <span>Message: {{ msg }}</span>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue!'
      }
    })
  </script> -->

  <!--原始 HTML-->
  <!-- <div id="app">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        rawHtml: 'Using mustaches: <span style="color: red">This should be red.</span>'
      }
    })
  </script> -->

  <!--Attribute-->
  <!-- <div id="app">
    <div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">Button</button>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        dynamicId: 'customerId',
        isButtonDisabled:false
      }
    })
  </script>  -->

  <!--使用 JavaScript 表达式-->
  <!-- <div id="app">
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <div v-bind:id="'list-' + id"></div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        number: 1,
        ok: false,
        message: 'hello world',
        id: 'customerId'
      }
    })
  </script> -->




  <!--指令-->
  <!--参数-->
  <!-- <div id="app">
    <a v-bind:href="url">...</a>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        url: "http://www.baidu.com",
        
      }
    })
  </script> -->

  <!--动态参数-->
  <div id="app">
    <a v-bind:[attrName]="url">...</a>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        attrname:"href",//在 DOM 中使用模板时这段代码会被转换为 `v-bind:[attrName]`attrname property，否则代码不会工作
        url: "http://www.baidu.com",        
      }
    })
  </script>

  <!--修饰符-->
  <!--TODO-->


  <!--缩写-->
   <!--TODO-->
</body>

</html>